/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <s-header :name="'我的订单'" :back="'/mine'"></s-header>
    <van-tabs
      @click="onChangeTab"
      :color="'#EF3965'"
      :title-active-color="'#EF3965'"
      class="order-tab"
      v-model:active="status"
    >
      <van-tab title="全部" name="0"></van-tab>
      <van-tab title="待付款" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="待收货" name="3"></van-tab>
      <van-tab title="待评价" name="4"></van-tab>
      <van-tab title="退还/售后" name="5"></van-tab>
    </van-tabs>
    <div class="content">
      <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="order-info"
        >
          <div class="order-item-header">
            <span>蓝不蓝自营 ></span>
            <span>待发货</span>
          </div>
          <van-card
            v-for="orderDetail in item.list"
            :key="orderDetail.goodsId"
            class="goods-row"
            :num="orderDetail.quantity"
            :price="(orderDetail.price/100).toFixed(2)"
            desc="全场包邮"
            :title="orderDetail.name"
            :thumb="orderDetail.squarePic"
            @click="goTo(item.orderId)"
          />
          <div class="btn-row">
            <div
              class="del-order"
              @click="delOrderWithConfirm(item.orderId)"
            >
              删除订单
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import sHeader from '@/components/MyHeader'
import { getOrderList, delOrder } from '@/service/axios-services'
import { useRoute, useRouter } from 'vue-router'
import { Dialog } from 'vant'

export default {
  name: 'Order',
  components: {
    sHeader
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      status: route.query.status,
      loading: false,
      finished: false,
      refreshing: false,
      list: []
    })

    const loadData = async () => {
      const { data } = await getOrderList(state.status)
      state.list = data
      state.loading = false
      state.finished = true
    }

    const onChangeTab = (status) => {
      state.status = status
      onRefresh()
    }
    const delOrderWithConfirm = (id) => {
      Dialog.confirm({
        title: '确认删除当前订单么？'
      }).then(() => {
        delOrder(id).then((res) => {
          if (res.code == 0) {
            onRefresh()
          }
        })
      })
    }
    const goTo = (id) => {
      router.push({ path: '/order-detail', query: { id } })
    }

    const goBack = () => {
      route.go(-1)
    }

    const onLoad = () => {
      if (state.refreshing) {
        state.list = []
        state.refreshing = false
      }
      loadData()
    }

    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      onLoad()
    }

    return {
      ...toRefs(state),
      onChangeTab,
      goTo,
      goBack,
      onLoad,
      delOrderWithConfirm,
      onRefresh
    }
  }
}
</script>

<style>
.page-wrapper {
  background: #f4f4f4;
  font-size: 14px;
}
.order-info {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 12px;
}
.goods-row {
  display: flex;
  flex-direction: row;
  margin-top: 18px;
  background-color: #fff;
}
.btn-row {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
  justify-content: flex-end;
}
.del-order {
  margin-right: 20px;
  border-radius: 10px;
  padding: 3px 12px;
  color: #575e64;
  border: 1px solid #ebebeb;
}
</style>
